<template>
  <div>
    <LoginHeader/>

    <div class="forget_body">

      <div class="setp-body">
        <el-steps :space="200" :active="active" simple style="background-color:rgba(163, 156, 156, 0.15);">
          <el-step title="用户验证" :icon="Edit"></el-step>
          <el-step title="重置密码" :icon="UploadFilled"></el-step>
          <el-step title="完成" :icon="Picture"></el-step>
        </el-steps>
        <div class="phone-tipsp" :style="ColorStyleTips.colorStyle">{{Tips.tipsp}}</div>
        <div class="input_your_phone-a" :style="viewUserAccu">
          <div class="font-togetP"><h4 id="phone">输入电话:</h4></div>
          <el-input v-model="userBaseInfo.userMobile" placeholder="请输入电话" size="large"
                    style="width: 250px;margin-left: 200px;position: absolute;margin-top: 50px" @keyup="checkInfoInter"/>
        </div>
        <div class="phone-tipsu" :style="ColorStyleTips.colorStylef">{{Tips.tipsu}}</div>
        <div class="input_your_username-a" :style="viewUserAccu">
          <div class="font-togetU"><h4 id="username">输入用户名:</h4></div>
          <el-input v-model="userBaseInfo.username" placeholder="请输入用户名" size="large"
                    style="width: 250px;margin-left: 200px;position: absolute;margin-top: 150px" @keyup="checkInfoInter"/>
        </div>
        <div class="input_your_password-a" :style="viewUserAccuP">
          <div class="font-togetP"><h4>输入密码:</h4></div>
          <el-input v-model="userRPwd.password" type="password" placeholder="请输入密码" show-password size="large"
                    style="width: 250px;margin-left: 200px;margin-top: 50px;position: absolute;"/>
        </div>
        <div class="input_your_repassword-a" :style="viewUserAccuP">
          <div class="font-togetR"><h4>二次密码:</h4></div>
          <el-input type="password" v-model="userRPwd.repassword" placeholder="请再次输入密码" show-password size="large"
                    style="width: 250px;margin-left: 200px;margin-top: 150px;position: absolute;"/>
        </div>
        <div class="r-sign-note" :style="viewText"><h4>重置密码成功 亲可以去登录了哟</h4></div>
        <el-button :style="viewUserBtn" style="margin-top: 270px;margin-left: 190px;position: absolute"
                   class="el-btnNext" @click="sureUserBaseInfo"
                   :disabled="isDisable">下一步
        </el-button>
        <el-button :style="viewUserBtn" style="margin-top: 270px;margin-left: 310px;position: absolute"
                   class="el-btnRe" :disabled="isDisbaleR" @click="rePassWord">重置
        </el-button>
        <el-button :style="viewUserBtnR" style="margin-top: 190px;margin-left: 230px;position: absolute"
                   class="el-btnR" @click="reLogin">重新登录
        </el-button>
      </div>
    </div>
    <LoginFooter/>
  </div>
</template>

<script>
import LoginFooter from "../components/LoginFooter";
import LoginHeader from "../components/LoginHeader";

export default {
  name: "forgetPassword",
  components: {LoginHeader, LoginFooter},
  data() {
    return {
      active: 0,
      isDisable: false,
      isDisbaleR: true,
      viewUserAccu: "",
      viewUserAccuP: "display:none",
      viewUserBtn: "",
      viewUserBtnR: "display:none",
      viewText: "display:none",
      isSureRight: false,
      isSurePwd:true,
      RetainInfo:{
       retainPhone:"",
       retainUserName:""
      },
      Tips: {
        tipsp: "",
        tipsu: ""
      },
      ColorStyleTips: {
        colorStyle: "color:red",
        colorStylef:"color:red"
      },
      userBaseInfo: {
        userMobile: "",
        username: ""
      },
      userRPwd: {
        password: "",
        repassword: ""
      }
    };
  },

  methods: {
    sureUserBaseInfo() {
      if (this.userBaseInfo.userMobile != "" && this.userBaseInfo.username != "") {
        this.$axios.get("api/userCheck/checkUserBaseInfo", {
          params: {
            username: this.userBaseInfo.username,
            userMobile: this.userBaseInfo.userMobile
          }
        }).then((res) => {
          console.log(res)
          if (!this.isSureRight) {
            this.Tips.tipsp = "请输入完整的验证信息",
                this.ColorStyleTips.colorStyle = "color:red"
          }else{
            if (res.data.code == 201) {
              this.active+=2;
              this.isDisable = true;
              this.viewUserAccu="display:none";
              this.viewUserAccuP="";
              this.isDisbaleR=false;
              this.RetainInfo.retainPhone=this.userBaseInfo.userMobile;
              this.RetainInfo.retainUserName=this.userBaseInfo.username;

            } else if (res.data.code == 205) {
              this.Tips.tipsp="电话号码不正确!";
              this.ColorStyleTips.colorStyle="color:red";
            } else if (res.data.code == 209) {
              this.Tips.tipsu="用户名不正确";
              this.ColorStyleTips.colorStylef="color:red";
            }
          }
        }).catch(() => {
          this.Tips.tipsp="状态异常!";
          this.ColorStyleTips.colorStyle="color:red";
        })
      }
    },
    checkInfoInter(){
      if(this.userBaseInfo.userMobile!=""&&this.userBaseInfo.userMobile!="")
      {
        this.isSureRight=true;
      }
    },
    rePassWord(){
      if(!this.isSurePwd)
      {
        this.tipsp="未输入完整!"
        this.ColorStyleTips.colorStyle="color:red";
        this.isSurePwd=false;
        console.log(this.RetainInfo.retainUserName);
      }else{
        this.$axios.post("api/userCheck/userResetPwd",{
          username:this.RetainInfo.retainUserName,
          password:this.userRPwd.password
        }).then((res)=>{
          if(res.data.code==201)
          {
            this.isSurePwd=true;
            this.viewUserBtn="display:none";
            this.viewUserBtnR="";
            this.active+=1;
            this.viewText="";
            this.viewUserAccuP="display:none";
          }else if(res.data.code==509)
          {
            alert("密码重置失败")
          }
        }) .catch(() => {
          alert('状态异常')
        })
      }
    },
    reLogin(){
      this.$router.push({path:'/ysLogin'});
    }
  }
}
</script>

<style scoped>
.forget_body {
  width: 100%;
  height: 600px;
  /*border: 1px solid black;*/
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  /*background-image: url("../assets/img/登录界面背景2.jpg");*/
  /*background-size: cover;*/
  /*background-position: 10% 50%;*/
  /*background-repeat: no-repeat;*/
}

.setp-body {
  width: 600px;
  height: 400px;
  margin-top: 100px;
  border: 1px solid rgba(163, 156, 156, 0.25);
  background-color: white;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 1px rgba(208, 204, 204, 0.27);

}

.el-btnNext {
  width: 100px;
  height: 38px;
  border: none;
  color: white;
  background-color: rgba(48, 184, 189, 0.7);
  transition-property: background-color, color;
  transition-duration: 500ms, 500ms;
}

.el-btnNext:hover {
  background-color: #0075bd;
  color: white;
  border: none;
}

.el-btnRe {
  width: 100px;
  height: 38px;
  border: none;
  color: white;
  background-color: rgba(48, 184, 189, 0.7);
  transition-property: background-color, color;
  transition-duration: 500ms, 500ms;
}

.el-btnRe:hover {
  background-color: #0075bd;
  color: white;
  border: none;
}

.font-togetP {
  width: 100px;
  height: 38px;
  display: inline-block;
  position: absolute;
  margin-top: 50px;
  margin-left: 125px;
  line-height: 38px;
  font-size: 14px;
  box-sizing: border-box;
  color: rgba(163, 156, 156, 0.95);
}

.font-togetU {
  width: 100px;
  height: 38px;
  display: inline-block;
  position: absolute;
  margin-top: 150px;
  margin-left: 112px;
  line-height: 38px;
  font-size: 14px;
  box-sizing: border-box;
  color: rgba(163, 156, 156, 0.95);
}

h4 {
  font-weight: 400;
}

.font-togetP {
  width: 100px;
  height: 38px;
  display: inline-block;
  position: absolute;
  margin-top: 50px;
  margin-left: 125px;
  line-height: 38px;
  font-size: 14px;
  box-sizing: border-box;
  color: rgba(163, 156, 156, 0.95);
}

.font-togetR {
  width: 100px;
  height: 38px;
  display: inline-block;
  position: absolute;
  margin-top: 150px;
  margin-left: 125px;
  line-height: 38px;
  font-size: 14px;
  box-sizing: border-box;
  color: rgba(163, 156, 156, 0.95);
}

.r-sign-note {
  position: absolute;
  margin-left: 188px;
  margin-top: 100px;
  color: rgba(163, 156, 156, 0.95);
  font-family: 新宋体;
}

.el-btnR {
  width: 140px;
  height: 40px;
  border: none;
  color: white;
  background-color: rgba(48, 184, 189, 0.7);
  transition-property: background-color, color;
  transition-duration: 500ms, 500ms;
}

.el-btnR:hover {
  background-color: #0075bd;
  color: white;
  border: none;
}
.phone-tipsp{
  position: absolute;
  margin-left: 200px;
  margin-top: 31px;
  font-size: 14px;
}
.phone-tipsu{
  position: absolute;
  margin-left: 200px;
  margin-top: 131px;
  font-size: 14px;
}
</style>